<template>
  <div class="warp">
    <div class="play-warp">
      <span
        class="iconfont icon-shangyishoushangyige prev"
        @click="handleReduceIndex"
      ></span>
      <span
        class="iconfont"
        :class="isPlay ? 'icon-zanting' : 'icon-bofang1'"
        @click="handlePlayOrSuspend"
      ></span>
      <span
        class="iconfont icon-xiayigexiayishou next"
        @click="handlePlusIndex"
      ></span>
    </div>
    <div class="progress-warp">
      <div class="top">
        <div class="song-name">
          <span>{{}}</span>
          - <span>{{}}</span>
        </div>
        <div class="time">
          <span>{{}}</span> /
          <span>{{ processingTime(time) }}</span>
        </div>
      </div>
      <div class="bottom" @click="handleJump">
        <div class="progress-line" :style="{ width: lineWidth }"></div>
        <div class="progress-point" :style="{ left: lineWidth }"></div>
      </div>
    </div>
    <div class="PlayOrder">
      <span class="iconfont icon-shunxubofang rotate"></span>
      <!-- <span class="iconfont icon-liebiaoxunhuan"></span>
      <span class="iconfont icon-suijibofang"></span>
      <span class="iconfont icon-danquxunhuan"></span> -->
    </div>
    <div class="Collection">
      <!-- <span class="iconfont icon-aixin1"></span> -->
      <span class="iconfont icon-aixin"></span>
    </div>
    <div class="download">
      <span class="iconfont icon-xiazai"></span>
    </div>
    <div class="comment">
      <span class="iconfont icon-pinglun"></span>
    </div>

    <div class="pattern">
      <span>纯净</span>
      <span class="open">off</span>
    </div>
    <div class="volume">
      <!-- <span class="iconfont icon-mute"></span> -->
      <span class="iconfont icon-shengyinkai"></span>
      <div class="ControlVolume">
        <div class="volume-line"></div>
        <div class="volume-point"></div>
      </div>
    </div>
  </div>

  <audio
    autoplay
    controls
    :src="url"
    style="display: none"
    @timeupdate="handleTime"
    @ended="handleNext"
    ref="audio"
  ></audio>
</template>

<script>
export default {
  name: 'Play',
}
</script>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRankingStore } from '../../store/modules/ranking.js'
import { useRoute } from 'vue-router'
let url = ref('https://music.163.com/song/media/outer/url?id=id.mp3')
let time = ref(0)
let lineWidth = ref(0)
const songsList = ref([])
let currentIndex = ref(0)
let id = ref(0)
let audio = ref()
let isPlay = ref(true)
const props = defineProps(['id', 'currentIndex', 'Data'])

onMounted(() => {
  currentIndex.value = props.currentIndex
  songsList.value = props.Data
  id.value = songsList.value[currentIndex.value].id
  time.value = songsList.value[currentIndex.value].time
  url.value = setUrl(url.value, id)
})

watch(
  () => currentIndex.value,
  () => {
    id = songsList.value[currentIndex.value].id
    time.value = songsList.value[currentIndex.value].time
    url.value = setUrl(url.value, id)
  }
)

// 拼接url
function setUrl(url, id) {
  let h = url.split('=')[0]
  let f = url.split('=')[1].split('.')[1]
  return h + '=' + id + '.' + f
}
// 处理时间
const processingTime = time => {
  let m = Math.floor(time / 1000 / 60)
  let s = Math.ceil((time / 1000) % 60)
  if (m < 10) {
    m = '0' + m
  }
  if (s < 10) {
    s = '0' + s
  }
  return m + ':' + s
}
// 上一首
const handleReduceIndex = () => {
  currentIndex.value--
  if (currentIndex.value < 0) {
    currentIndex.value = songsList.value.length - 1
  }
}
// 下一首
const handlePlusIndex = () => {
  currentIndex.value++
  if (currentIndex.value > songsList.value.length - 1) {
    currentIndex.value = 0
  }
}
// 暂停播放
const handlePlayOrSuspend = () => {
  if (isPlay.value) {
    audio.value.pause()
  } else {
    audio.value.play()
  }
  isPlay.value = !isPlay.value
}
// 当前放完，下一首
const handleNext = () => {
  currentIndex.value += 1
}

// 自动进度条
const handleTime = e => {
  lineWidth.value = (e.target.currentTime / (time.value / 1000)) * 100 + '%'
}
// 点击跳转
const handleJump = e => {
  const currentTime = (e.offsetX / 500) * (time.value / 1000)
  audio.value.currentTime = currentTime
}
</script>

<style scoped lang="less">
.warp {
  margin: 60px auto 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 1200px;
  height: 100px;
  // border: 1px solid red;
  background-color: #4a5966;
  display: flex;
  .play-warp {
    // flex: 0.2;
    height: 100px;
    line-height: 100px;

    span {
      display: inline-block;
      font-size: 35px;
      width: 40px;
      color: #dcdfe2;
      margin: 0 10px 0 5px;
    }
  }
  .progress-warp {
    margin-left: 20px;
    .top {
      margin-top: 30px;
      margin-bottom: 10px;
      width: 500px;
      line-height: 20px;
      display: flex;
      justify-content: space-between;
    }
    .bottom {
      width: 500px;
      height: 0px;
      position: relative;
      border: 0.5px solid #757a83;
      .progress-line {
        position: absolute;
        width: 0;
        left: 0;
        top: -1px;
        border: 0.5px solid #dadee1;
      }
      .progress-point {
        position: absolute;
        top: -5px;
        left: 0px;
        // width: 10px;
        // height: 10px;
        border: 5px solid #dadee1;
        border-radius: 50%;
        &:hover {
          transform: scale(1.2);
        }
      }
    }
  }
  .PlayOrder {
    margin: 0 10px 0 30px;
    line-height: 100px;
    span {
      color: #d5d6d9;
      font-size: 22px;
    }
    .rotate {
      display: inline-block;
      transform: rotate(-90deg);
    }
  }
  .Collection {
    margin: 0 10px;
    line-height: 100px;
    span {
      font-size: 22px;
      color: #d5d6d9;
    }
  }
  .download {
    margin: 0 10px;
    line-height: 100px;
    span {
      font-size: 22px;
      color: #d5d6d9;
    }
  }
  .comment {
    margin: 0 10px;
    line-height: 100px;
    span {
      font-size: 22px;
      color: #d5d6d9;
    }
  }
  .pattern {
    margin: 35px 10px 0;
    width: 76px;
    height: 30px;
    border: 1px solid #d8d9dc;
    border-radius: 15px;
    display: flex;
    justify-content: flex-start;
    span {
      font-size: 14px;
      line-height: 30px;
      margin-left: 10px;
      color: #d5d6d9;
    }
    .open {
      width: 28px;
      height: 30px;
      text-align: center;
      border-radius: 50%;
      font-size: 12px;
      background-color: #d5d6d9;
      color: #000;
    }
  }
  .volume {
    margin: 0 10px;
    line-height: 100px;
    display: flex;
    align-content: center;
    position: relative;
    span {
      font-size: 22px;
      color: #d5d6d9;
    }
    .ControlVolume {
      width: 120px;
      height: 0px;
      position: absolute;
      top: 50%;
      left: 25px;
      border: 0.5px solid #757a83;
      .volume-line {
        position: absolute;
        width: 50px;
        left: 0;
        top: -1px;
        border: 0.5px solid #dadee1;
      }
      .volume-point {
        position: absolute;
        top: -5px;
        left: 50px;
        // width: 10px;
        // height: 10px;
        border: 5px solid #dadee1;
        border-radius: 50%;
        &:hover {
          transform: scale(1.2);
        }
      }
    }
  }
}
</style>
